<!--
 * @Author: wwssaabb
 * @Date: 2021-09-13 11:24:18
 * @LastEditTime: 2021-09-15 15:26:57
 * @FilePath: \gshop-client\src\views\Shop\components\Comments.vue
-->
<!-- 
  shop页面的评价组件
 -->

<template>
  <div class="comments-content">
    <div class="rating-show">
      <div class="left">
        <span>4.2</span>
        <span>综合评分</span>
        <span>高于周边商家99%</span>
      </div>
      <div class="right">
        <div class="right-content">
          <div>
            <Rate
              v-model="info.rate_attitude"
              :size="16"
              color="#ff9900"
              allow-half
              readonly
            ></Rate>
            <span>服务态度</span><span>{{ info.rate_attitude }}</span>
          </div>
          <div>
            <Rate
              v-model="info.rate_goods"
              :size="16"
              color="#ff9900"
              allow-half
              readonly
            ></Rate>
            <span>商品评分</span><span>{{ info.rate_goods }}</span>
          </div>
          <div>
            送达时间<span>{{ info.finish_time }}分钟</span>
          </div>
        </div>
      </div>
    </div>
    <div class="comments-list-wrap">
      <div class="comments-tabs">
        <div class="tabs">
          <div
            class="tab-item"
            :class="chooseTab === item.id ? 'choose' : ''"
            v-for="item in info.comments.tabs"
            :key="item.id"
            @click="chooseTab = item.id"
          >
            {{ item.name + " " + item.count }}
          </div>
        </div>
        <div class="fileter">
          <Icon
            name="checked"
            :color="showEmpty ? '#eee' : '#02a774'"
            size="20"
            @click="showEmpty = !showEmpty"
          />
          <span>只看有内容的评价</span>
        </div>
      </div>
      <div class="comments-list">
        <div
          class="comments-item"
          v-for="item in info.comments.list
            .filter((item) => (chooseTab === 1 ? true : item.isCommend))
            .filter((item) => (!showEmpty ? item.content !== '' : true))"
          :key="item.id"
        >
          <img :src="item.user.avatar" alt="" />
          <div class="message">
            <div class="name">
              <span>{{ item.user.username }}</span
              ><span>{{
                moment(item.time).format("YYYY-MM-DD hh-mm-ss")
              }}</span>
            </div>
            <div class="rate">
              <Rate
                v-model="item.user.rate"
                :size="11"
                color="#ff9900"
                allow-half
                readonly
              ></Rate>
            </div>
            <div class="item-content">{{ item.content }}</div>
            <div class="tabs">
              <Icon
                name="good-job"
                color="#ff9900"
                size="16"
                v-if="item.isCommend"
              /><span v-for="tab in item.bugGoodsTabs" :key="tab">{{
                tab
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Rate, Icon } from "vant";
import moment from "moment";
//选择展示的评论
const chooseTab = ref(1);
const showEmpty = ref(false);
const info = {
  rate_attitude: 4.1,
  rate_goods: 4.3,
  finish_time: 28,
  comments: {
    tabs: [
      { id: 1, name: "全部", count: 24 },
      { id: 2, name: "满意", count: 18 },
      { id: 3, name: "不满意", count: 6 },
    ],
    list: [
      {
        id: 1,
        user: {
          username: "3****9",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.8,
        },
        time: Date.now(),
        content: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
        isCommend: true,
        bugGoodsTabs: ["南瓜粥", "皮蛋瘦肉粥"],
      },
      {
        id: 2,
        user: {
          username: "2****6",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.7,
        },
        time: Date.now(),
        content: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
        isCommend: true,
        bugGoodsTabs: ["扁豆焖面", "娃娃炖豆腐"],
      },
      {
        id: 3,
        user: {
          username: "3****8",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.5,
        },
        time: Date.now(),
        content: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
        isCommend: true,
        bugGoodsTabs: ["牛肉馅饼", "皮蛋瘦肉粥"],
      },
      {
        id: 4,
        user: {
          username: "1****7",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.1,
        },
        time: Date.now(),
        content: "",
        isCommend: false,
        bugGoodsTabs: ["牛肉馅饼", "皮蛋瘦肉粥"],
      },
      {
        id: 5,
        user: {
          username: "1****7",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.2,
        },
        time: Date.now(),
        content: "",
        isCommend: false,
        bugGoodsTabs: [],
      },
      {
        id: 6,
        user: {
          username: "4****4",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.3,
        },
        time: Date.now(),
        content: "",
        isCommend: false,
        bugGoodsTabs: [],
      },
      {
        id: 7,
        user: {
          username: "2****5",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.7,
        },
        time: Date.now(),
        content: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
        isCommend: false,
        bugGoodsTabs: [],
      },
      {
        id: 8,
        user: {
          username: "2****7",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          rate: 4.6,
        },
        time: Date.now(),
        content: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
        isCommend: true,
        bugGoodsTabs: ["扁豆焖面", "牛肉馅饼"],
      },
    ],
  },
};
</script>

<style lang="scss" scoped>
.comments-content {
  height: calc(100vh - 211px);
  background-color: #fff;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  .rating-show {
    padding: 20px;
    display: flex;
    background-color: #fff;
    border-bottom: 10px solid #eee;

    .left {
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #eee;
      span {
        font-size: 12px;
        font-family: "Microsoft YaHei";
        color: #333;

        &:first-child {
          font-size: 24px;
          color: #ff9900;
          margin-bottom: 5px;
        }
        &:last-child {
          color: #888;
          margin-top: 5px;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .right-content {
        display: flex;
        flex-direction: column;
        div {
          font-size: 12px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            margin-left: 10px;
            &:last-child {
              color: #ff9900;
            }
          }
          &:last-child {
            span {
              color: #888;
            }
          }
        }
      }
    }
  }

  .comments-list-wrap {
    .comments-tabs {
      .tabs {
        padding: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .tab-item {
          font-size: 12px;
          padding: 8px 10px;
          color: #333;
          background-color: #dbdddf;
          margin-right: 10px;
          border-radius: 2px;
          &.choose {
            color: #fff;
            background-color: #02a774;
          }
        }
      }
    }

    .fileter {
      display: flex;
      align-items: center;
      padding: 0 0 20px 20px;
      border-bottom: 1px solid #eee;
      span {
        font-size: 12px;
        color: #888;
        margin-left: 5px;
      }
    }

    .comments-list {
      display: flex;
      justify-content: stretch;
      flex-wrap: wrap;
      align-items: center;

      .comments-item {
        display: flex;
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid #eee;

        img {
          width: 8vw;
          height: 8vw;
          border-radius: 50%;
          margin-right: 10px;
        }
        .message {
          flex: 1;
          // width: calc(84vw - 30px);

          div {
            width: 100%;
            flex: 0;
            &.name {
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;
              span {
                font-size: 12px;
                color: #aaa;
                &:first-child {
                  color: #333;
                }
              }
            }
            &.rate,
            &.item-content {
              margin-bottom: 5px;
            }

            &.tabs {
              display: flex;
              flex-wrap: wrap;
              align-items: center;

              i {
                margin: 0 10px 10px 0;
              }
              span {
                font-size: 12px;
                border: 1px solid #eee;
                margin: 0 10px 10px 0;
                padding: 2px 5px;
                color: #aaa;
                border-radius: 2px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
